<template>
  <div class="applyFor">
    <van-nav-bar title="资料修改" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="topTitle">
      <title-item title1st="请填写修改的资料信息"> </title-item>
    </div>
    <div class="Form">
      <van-form @failed="onFailed" @submit="onSubmit">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field v-model="name" name="name" label="服务商名称" label-width="105" placeholder="请输入服务商名称"
            :rules="[{ required: true, message: '服务商名称' }]" />
          <!-- <van-field v-model="region" is-link readonly label-width="105" name="region" label="签约区域"
            :rules="[{ required: true, message: '请选择城市' }]" placeholder="点击选择城市" @click="showPicker = true" /> -->
          <van-field v-model="region" readonly label-width="105" name="region" label="签约区域"
            :rules="[{ required: true, message: '请选择城市' }]" placeholder="点击选择城市" @click="showPicker = true" is-link>
            <template #input>
              <div v-if="region.length == ''" style="color: #c8c9cc;">
                点击选择城市
              </div>
              <div v-else>
                <div @click.stop="" v-for="(item, index) in servicesList" :key="index">
                  <van-tag :show="item.show" closeable size="medium" color="#323233" plain @close="delItem(index)">
                    {{ item.name }}
                  </van-tag>
                </div>
              </div>
            </template>
          </van-field>
          <van-field v-model="email" label-width="105" type="text" name="email" label="对账邮箱" placeholder="请输入对账邮箱"
            :rules="[{ required: true, message: '请填对账邮箱' }]" />
          <van-field v-model="account_number" label-width="105" type="text" name="account_number" label="收款账号"
            placeholder="请输入收款账号" :rules="[{ required: true, message: '请填收款账号' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 105%)">
            提交
          </van-button>
        </div>
      </van-form>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-area v-model="city" title="城市选择" :area-list="areaList" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
    </div>
  </div>
</template>
  
<script setup>
import TitleItem from "@/components/title-item/title-item.vue";
import { useRouter } from "vue-router";
import {
  showToast
} from 'vant';
const router = useRouter();
import { areaList } from '@vant/area-data';
import { regionserviceUpdate, getRegionservice } from "@/services";
import { closeToast, showLoadingToast } from "vant";
import { ref, onMounted, watch } from "vue";
const name = ref("");
const region = ref("");
const email = ref("");
const account_number = ref("");
const showPicker = ref(false);
const servicesList = ref([])//选择的区域默认为空数组
let localInfo = localStorage.getItem('userinfo1')
let token = JSON.parse(localInfo).token
// console.log(userInfo)
watch(servicesList, (item) => {
  // console.log(111)
  const regions = item.filter(reg => {
    // console.log(222)
    if (reg.show) {
      return reg
    }
  })
  // console.log(333)
  let getArea = regions.map(val => {
    return val.name
  })
  region.value = getArea;
  console.log(region.value)
}, {
  deep: true,
})
const delItem = (index) => {
  servicesList.value.splice(index, 1)
}
onMounted(async () => {
  if (token) {
    // userInfo = JSON.parse(localInfo)
    // console.log(userInfo)
    let res = await getRegionservice()
    name.value = res.data.regionservice.name
    region.value = res.data.regionservice.region
    email.value = res.data.regionservice.email
    account_number.value = res.data.regionservice.account_number
    let getAreaInfo = region.value.split(',')
    getAreaInfo.map((item) => {
      servicesList.value.push({ show: true, name: item })
    })
  }
})
// const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
//   region.value = selectedOptions[0]?.text + selectedOptions[1]?.text + selectedOptions[2]?.text;
//   showPicker.value = false;
// };
const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
  // console.log(selectedValues, selectedOptions, selectedIndexes)
  let isPush = false;
  let item = selectedOptions[0]?.text + selectedOptions[1]?.text + selectedOptions[2]?.text;
  let arr = [{ show: true, name: item }]
  servicesList.value.filter(el => {
    if (el.name == item) {
      isPush = true
    }
  })
  if (isPush) {
    showToast('您已添加过该区域');
  } else { servicesList.value = [...servicesList.value, ...arr] }
  showPicker.value = false;
};
const validator = (val) =>
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    val
  );

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const onSubmit = async (val) => {
  let res = await regionserviceUpdate(val)
  showToast('修改成功');
  router.push({ path: '/home' })
}
// 返回按钮
const onClickLeft = () => {
  router.back();
};
</script>
  
<style lang="scss" scoped>
.applyFor {
  padding: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  color: #1d1b20;

  .topTitle {
    margin-left: -4px;
  }
}
</style>
  